<template>
  <div class="evaluationMain">
    <div class="evaluationBox">
      <div v-if="list.length > 0">
        <div class="itemBox clearfix" v-for="(item,index) in list" :key="index">
          <div class="image">
            <img src="@/assets/images/profile.jpg" alt="">
          </div>
          <div class="info">
            <div class="userTime flex align-center justify-between">
              <b>{{ item.commentUserName }}</b>
              <span>{{ item.commentTime }}</span>
            </div>
            <div class="content">
              {{ item.content }}
            </div>
          </div>
        </div>
        <div class="fanye flex align-center justify-end" v-if="false">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
      </div>
      <div class="noDataBox flex align-center justify-center" v-else>
        <el-empty description="暂无评论数据" :image-size="100"></el-empty>
      </div>
    </div>
  </div>
</template>
<script>
import {getColumnCommentList} from "@/api/model/comment";

export default {
  name: '',
  props: {
    columnId: {
      type: String,
      require: true,
      default: ''
    }
  },
  components: {},
  data() {
    return {
      list: []
    }
  },
  computed: {},
  watch: {
    columnId: {
      handler(val) {
        this.getCommentList(val)
      },
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    async getCommentList(columnId) {
      const {code, rows, total} = await getColumnCommentList({columnId});
      if (code === 200) {
        this.list = rows;
        this.$store.commit('SET_CONTENTEVALUATIONNUM', total);
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.evaluationBox {
  .itemBox {
    position: relative;
    padding: 24px 25px;
    border-bottom: 1px solid #d9dde1;

    .image {
      width: 72px;
      float: left;

      img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: block;
      }
    }

    .info {
      width: calc(100% - 72px);
      float: left;

      .userTime {
        margin-bottom: 4px;
        height: 25px;

        b {
          font-size: 15px;
          color: #1c1f21;
          margin-right: 10px;
          font-weight: 700;
        }

        span {
          font-size: 12px;
          color: #9199a1;
        }
      }

      .content {
        font-size: 14px;
        color: #1c1f21;
        line-height: 22px;
        word-wrap: break-word;
        text-align: justify;
      }
    }
  }

  .fanye {
    padding-top: 28px;
  }

  .noDataBox {
    height: 400px;
  }
}
</style>
